<template>
  <div class="text_sp">
    <div class="container">
      <div class="container_title">
        <span class="iconfont icon-untitled60"></span>
        <span class="title">文字特效</span>
      </div>
      <div class="container_content">
        <div class="handle_box">
          <ul>
            <li
              class="btn"
              :class="item.component===componentName?'active':''"
              v-for="(item,index) in list"
              :key="index"
              @click="checkSP(item.component)">
              {{item.title}}
            </li>
          </ul>
        </div>
        <div class="show_box">
          <loading :loading="loading" />
          <component :is="componentName" :name="componentName" ></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import textBounce from './text_bounce.vue'
  import textLove from './text_love.vue'
  import textTabs from './text_tabs.vue'
  import loading from '../../../components/loading/loading2.vue'
  export default {
    name: "text_sp",  // 文字跳动
    data() {
      return {
        componentName: 'textBounce',
        loading: false,
        list: [
          { title: '文字跳动', value: '', component: 'textBounce' },
          { title: '爱心旋转', value: '', component: 'textLove' },
          { title: '标签旋转', value: '', component: 'textTabs' },
        ]
      }
    },
    components: {
      textBounce,
      textLove,
      textTabs,
      loading
    },
    created() {

    },
    methods: {
      checkSP(component) {
        this.componentName = '';
        this.loading = true;
        let timer = setTimeout(() => {
          this.componentName = component;
          this.loading = false;
          clearTimeout(timer);
        }, 2000);
      }
    }
  }
</script>

<style scoped lang="scss">
  .text_sp {
    .container_content{
      overflow: hidden;
      background: transparent;
      .show_box{
        min-height: 300px;
        width: 100%;
        border: 2px solid #007DFF;
        background: #fff;
        border-radius: 4px;
        position: relative;
      }
      .handle_box{
        width: 100%;
        ul{
          /*border: 1px solid red;*/
          padding: 20px;
          display: flex;
          li.btn{
            margin: 10px 5px;
            width: 100px;
            height: 36px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            text-align: center;
            line-height: 36px;
            color: #fff;
            border-radius: 4px;
            background-image: linear-gradient(to right, #7DA9D7, #4C98E7, #007DFF);
            cursor: pointer;
          }
          li.btn:hover{
            background-image: linear-gradient(to right, #6A9FD7, #388DE6, #006BDA);
          }
          li.btn.active{
            background-image: linear-gradient(to right, #8EC7A2, #56AB74, #28934D);
          }
        }
      }
    }
  }
</style>
